<template>
  <div>
    <div class="index-detail-list">
      <div class="echarts-box-title echarts-box padding-left-0">
        <div class="item active" data-type="important">重要通知</div>
        <div class="item" data-type="rules">规章制度</div>
      </div>
      <div class="col-xs-12 item-contain active" data-type="important">
        <ul>
          <li>
            <a href="" title="关于2017年中秋节国、庆节放假及作息时间调整的通知">
              <span class="title text-c666"
                >关于2017年中秋节国、庆节放假及作息时间调整的通知</span
              >
              <span class="time text-c999">09-18</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="col-xs-12 item-contain" data-type="rules">
        <ul>
          <li>
            <a href="" title="规定规定规定规定规定规定规定规定">
              <span class="title text-c666"
                >规定规定规定规定规定规定规定规定</span
              >
              <span class="time text-c999">09-18</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},
  props: {},
  mounted() {},
  computed: {},
  watch: {},
  methods: {},
  destroyed() {},
};
</script>
<style lang='scss' scoped>
.index-detail-list .item-contain{
	display: none;
	overflow: hidden;
	padding: 14px 14px 9px;
	border: 1px solid #ececec;
} 
.index-detail-list .item-contain.active{
	display: block;
	// <!---
	// 	在这里也是可以加动画的 我是场景需求 加在了内层的ul
	// 	animation: hideIndex 0.3s;
	// 	-moz-animation: hideIndex  0.3s; /* Firefox */
	// 	-webkit-animation: hideIndex  0.3s; /* Safari and Chrome */
	// 	-o-animation: hideIndex  0.3s; /* Opera */
	// -->
}
.index-detail-list .item-contain.active ul {
	animation: hideIndex 0.3s;
	-moz-animation: hideIndex  0.3s; /* Firefox */
	-webkit-animation: hideIndex  0.3s; /* Safari and Chrome */
	-o-animation: hideIndex  0.3s; /* Opera */
}
@keyframes hideIndex{
	// <!--具体细节自己可以调整-->
	0%{ opacity: 0; transform: translate(800px, 0) }
	100%{opacity: 1; transform: translate(0, 0) }
}
</style>